<template>
  <view class="wallet-container">
    <!-- 顶部导航 -->
    <view class="top-nav">
      <view class="nav-back" @click="goBack">
        <text class="icon">&#xf060;</text>
      </view>
      <text class="nav-title">钱包充值</text>
      <view class="nav-right" @click="pageToRec">
        <text class="icon">&#xf0ca;</text>
      </view>
    </view>

    <!-- 余额卡片 -->
    <view class="balance-card">
      <view class="balance-bg-circle"></view>
      <view class="balance-bg-circle-2"></view>
      <view class="balance-content">
        <text class="balance-label">账户余额</text>
        <view class="balance-amount-wrapper">
          <text class="balance-currency">¥</text>
          <text class="balance-amount">{{
            vk.vuex.getters("$user/getUserIntegral")
          }}</text>
        </view>
        <view class="balance-tips">
          <text class="icon">&#xf05a;</text>
          <text>1元 = 10积分</text>
        </view>
      </view>
      <view class="balance-shine"></view>
    </view>

    <!-- 充值套餐 -->
    <view class="packages-section">
      <view class="section-title">
        <text class="icon">&#xf0d6;</text>
        <text>选择充值套餐</text>
      </view>

      <view class="packages-grid">
        <view
          class="package-item"
          v-for="(item, index) in packages"
          :key="index"
          :class="{
            active: active === index,
            recommended: item.tag === '推荐',
          }"
          @click="selectPackage(index)"
        >
          <view v-if="item.tag" class="package-badge">{{ item.tag }}</view>
          <view class="package-icon-wrapper">
            <text class="package-icon">💰</text>
          </view>
          <view class="package-amount">¥{{ item.amount }}</view>
          <view class="package-integral">{{ item.integral }}积分</view>
          <view v-if="item.bonus > 0" class="package-bonus">
            <text class="icon">&#xf06b;</text>
            <text>额外送{{ item.bonus }}</text>
          </view>
          <view class="package-select-indicator">
            <text class="icon">&#xf00c;</text>
          </view>
        </view>

        <!-- 自定义金额 -->
        <view
          class="package-item custom"
          :class="{ active: active === 'custom' }"
          @click="active = 'custom'"
        >
          <view class="package-icon-wrapper">
            <text class="package-icon">✏️</text>
          </view>
          <view class="package-amount">自定义</view>
          <view class="package-integral">任意金额</view>
          <view class="package-select-indicator">
            <text class="icon">&#xf00c;</text>
          </view>
        </view>
      </view>

      <!-- 自定义金额输入 -->
      <view v-if="active === 'custom'" class="custom-input-card">
        <view class="input-label">
          <text class="icon">&#xf155;</text>
          <text>请输入充值金额</text>
        </view>
        <view class="input-wrapper">
          <text class="input-prefix">¥</text>
          <vk-data-input
            v-model="form1.balance"
            placeholder="请输入金额"
            type="money"
            class="amount-input"
          />
        </view>
        <view class="input-tips">最低充值1元，1元可兑换10积分</view>
      </view>
    </view>

    <!-- 充值按钮 -->
    <view class="recharge-footer safe-area-inset-bottom">
      <button
        class="recharge-btn"
        :class="{ disabled: !form1.balance || form1.balance <= 0 }"
        @click="showPayType"
      >
        <text class="btn-icon">&#xf09d;</text>
        <text>立即充值</text>
      </button>
    </view>

    <!-- 弹窗 - 支付方式选择 -->
    <pay-action-sheet
      :value="payType.show"
      :totalFee="form1.balance"
      @click="pay"
      @close="closePaySheet"
    ></pay-action-sheet>
    <!-- 余额充值支付插件 -->
    <pay-balance-recharge ref="vkPayBalanceRecharge"></pay-balance-recharge>

    <!-- 页面内容结束 -->
    <!-- 全局公共浮球导航模块 -->
    <vk-data-float-ball :show-back-top="showBackTop"></vk-data-float-ball>
    <vk-data-loading v-model="loading"></vk-data-loading>
  </view>
</template>

<script>
let vk = uni.vk; // vk依赖
import payActionSheet from "./components/pay-action-sheet";
import payBalanceRecharge from "./components/pay-balance-recharge";
export default {
  components: {
    payActionSheet,
    payBalanceRecharge,
  },
  data() {
    // 页面数据变量
    return {
      // init请求返回的数据
      data: {
        balanceStr: "请稍等...",
      },
      // 表单请求数据
      form1: {
        balance: "",
      },
      showBackTop: false, // 是否显示返回顶部按钮
      loading: false,
      active: 0, // 默认选中第一个套餐
      payType: {
        show: false,
      },
      // 充值套餐列表（1元 = 10积分，充值越多赠送越多）
      packages: [
        {
          amount: 5, // 充值金额
          integral: 50, // 获得积分（基础100 + 赠送20）
          bonus: 0, // 额外赠送
          tag: "无优惠",
        },
        {
          amount: 30,
          integral: 320, // 基础300 + 赠送80
          bonus: 20,
          tag: "热门",
        },
        {
          amount: 50,
          integral: 550, // 基础500 + 赠送200
          bonus: 50,
          tag: "超值",
        },
        {
          amount: 100,
          integral: 1200, // 基础1000 + 赠送500
          bonus: 200,
          tag: "最划算",
        },
        {
          amount: 200,
          integral: 2500, // 基础2000 + 赠送1200
          bonus: 500,
          tag: "VIP",
        },
        {
          amount: 500,
          integral: 6000, // 基础5000 + 赠送4000
          bonus: 1000,
          tag: "土豪",
        },
      ],
    };
  },
  onPageScroll(e) {
    this.showBackTop = e.scrollTop > 200;
  },
  // 监听 - 页面每次【加载时】执行(如：前进)
  onLoad(options = {}) {
    vk = uni.vk;
    this.options = options;
    // 默认选中第一个套餐的金额

    this.active = 0;
    this.form1.balance = this.packages[0].amount*100;
    this.form1.integral = this.packages[0].integral;
    this.init();
  },
  // 监听 - 页面【首次渲染完成时】执行。注意如果渲染速度快，会在页面进入动画完成前触发
  onReady() {
    let { options = {} } = this;
    // 在onReady内执行是为了先让组件加载完成
    // 如果是同步回调过来的，执行下查询
    if (options.return && options.out_trade_no) {
      this.form1.out_trade_no = options.out_trade_no;
      this.$refs.vkPayBalanceRecharge.checkPayment(options.out_trade_no);
		}
  },
  // 监听 - 页面每次【显示时】执行(如：前进和返回) (页面每次出现在屏幕上都触发，包括从下级页面点返回露出当前页面)
  onShow() {},
  // 监听 - 页面每次【隐藏时】执行(如：返回)
  onHide() {},
  // 函数
  methods: {
    // 页面数据初始化函数
    init() {
      let that = this;
      let options = that.options;
      that.getMyInfo();
    },
    // 返回上一页
    goBack() {
      uni.navigateBack();
    },
    pageToRec() {
      vk.navigateTo("./list");
    },
    getMyInfo() {
      // 更新vuex内的用户信息
      vk.callFunction({
        url: "client/user.getMyInfo",
      });
    },
    // 选择套餐
    selectPackage(index) {
      this.active = index;
      this.form1.balance = this.packages[index].amount * 100;
      this.form1.integral = this.packages[index].integral;
      console.log("selectPackage 被调用，当前充值金额：", this.form1.balance);
      console.log("selectPackage 被调用，当前充值积分：", this.form1.integral);
    },
    showPayType() {
      console.log(
        "showPayType 被调用，当前充值金额（元）：",
        this.form1.balance
      );
      console.log(
        "showPayType 被调用，当前充值金额（分）：",
        this.form1.balance * 100
      );

      if (!this.form1.balance || this.form1.balance <= 0) {
        vk.toast("充值金额必须>0");
        return false;
      }
      let needPopup = true;
      // #ifdef MP
      needPopup = false;
      // #endif
      if (needPopup) {
        console.log("准备显示支付弹窗");
        this.payType.show = true;
        // 使用 $nextTick 确保数据已更新
        this.$nextTick(() => {
          console.log("支付弹窗状态：", this.payType.show);
        });
      } else {
        this.pay();
      }
    },
    // 关闭支付方式选择弹窗
    closePaySheet() {
      this.payType.show = false;
    },
    pay(payType) {
      let that = this;
      // 防抖函数
      vk.pubfn.debounce(() => {
        that.payType.show = false;
        // 金额转换：元 -> 分（乘以100）
        const totalFeeInCents = Math.round(that.form1.balance);
        console.log("💰 支付金额（元）:", that.form1.balance);
        console.log("💰 支付金额（分）:", totalFeeInCents);
        console.log("💰 支付积分：", that.form1.integral);
        that.$refs.vkPayBalanceRecharge.createPayment({
          provider: payType,
          total_fee: totalFeeInCents,
          integral: that.form1.integral,
          success: (data) => {
            that.pageToRec();
          },
        });
      }, 600);
    },
  },
  // 监听器
  watch: {
    "payType.show"(newVal) {
      console.log("💰 wallet.vue - payType.show 变化:", newVal);
    },
    "form1.balance"(newVal) {
      console.log("💰 wallet.vue - form1.balance 变化:", newVal);
    },
  },
  // 计算属性
  computed: {},
};
</script>
<style lang="scss" scoped>
@import url("https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css");

.wallet-container {
  min-height: 100vh;
  background: linear-gradient(180deg, #0f0c29 0%, #1a1a2e 50%, #0f0c29 100%);
  padding-bottom: 200rpx;
}

/* 顶部导航 */
.top-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 30rpx 30rpx;
  position: sticky;
  top: 0;
  background: rgba(15, 12, 41, 0.95);
  backdrop-filter: blur(10rpx);
  z-index: 100;
  border-bottom: 1rpx solid rgba(255, 255, 255, 0.05);

  .nav-back,
  .nav-right {
    width: 72rpx;
    height: 72rpx;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.08);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s;

    .icon {
      font-family: FontAwesome;
      font-size: 36rpx;
      color: rgba(255, 255, 255, 0.9);
    }
  }

  .nav-back:active,
  .nav-right:active {
    background: rgba(255, 255, 255, 0.15);
    transform: scale(0.95);
  }

  .nav-title {
    font-size: 36rpx;
    font-weight: bold;
    color: #fff;
    text-align: center;
  }
}

/* 余额卡片 */
.balance-card {
  margin: 30rpx 30rpx 40rpx;
  padding: 50rpx 40rpx;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  border-radius: 30rpx;
  position: relative;
  overflow: hidden;
  box-shadow: 0 20rpx 60rpx rgba(102, 126, 234, 0.3);

  .balance-bg-circle {
    position: absolute;
    top: -100rpx;
    right: -100rpx;
    width: 300rpx;
    height: 300rpx;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.1);
  }

  .balance-bg-circle-2 {
    position: absolute;
    bottom: -80rpx;
    left: -80rpx;
    width: 200rpx;
    height: 200rpx;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.08);
  }

  .balance-content {
    position: relative;
    z-index: 1;

    .balance-label {
      font-size: 28rpx;
      color: rgba(255, 255, 255, 0.8);
      display: block;
      margin-bottom: 20rpx;
    }

    .balance-amount-wrapper {
      display: flex;
      align-items: baseline;
      gap: 10rpx;
      margin-bottom: 24rpx;

      .balance-currency {
        font-size: 40rpx;
        color: #fff;
        font-weight: bold;
      }

      .balance-amount {
        font-size: 68rpx;
        color: #fff;
        font-weight: bold;
        line-height: 1;
      }
    }

    .balance-tips {
      display: flex;
      align-items: center;
      gap: 12rpx;
      padding: 12rpx 20rpx;
      background: rgba(255, 255, 255, 0.15);
      border-radius: 50rpx;
      backdrop-filter: blur(10rpx);
      width: fit-content;

      .icon {
        font-family: FontAwesome;
        font-size: 24rpx;
        color: rgba(255, 255, 255, 0.9);
      }

      text {
        font-size: 24rpx;
        color: rgba(255, 255, 255, 0.9);
      }
    }
  }

  .balance-shine {
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(
      90deg,
      transparent,
      rgba(255, 255, 255, 0.2),
      transparent
    );
    animation: shine 3s infinite;
  }
}

@keyframes shine {
  0% {
    left: -100%;
  }
  50%,
  100% {
    left: 200%;
  }
}

/* 套餐区域 */
.packages-section {
  padding: 0 30rpx;

  .section-title {
    display: flex;
    align-items: center;
    gap: 16rpx;
    margin-bottom: 30rpx;
    font-size: 32rpx;
    font-weight: bold;
    color: #fff;

    .icon {
      font-family: FontAwesome;
      font-size: 28rpx;
      color: #667eea;
    }
  }

  .packages-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 24rpx;
  }

  .package-item {
    position: relative;
    background: rgba(255, 255, 255, 0.08);
    border: 2rpx solid rgba(255, 255, 255, 0.1);
    border-radius: 24rpx;
    padding: 30rpx 24rpx;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12rpx;
    transition: all 0.3s;
    cursor: pointer;
    backdrop-filter: blur(10rpx);

    .package-badge {
      position: absolute;
      top: 0;
      right: 0;
      background: linear-gradient(135deg, #f59e0b 0%, #f97316 100%);
      color: #fff;
      font-size: 20rpx;
      font-weight: bold;
      padding: 6rpx 16rpx;
      border-radius: 0 24rpx 0 20rpx;
    }

    .package-icon-wrapper {
      width: 80rpx;
      height: 80rpx;
      border-radius: 50%;
      background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
      display: flex;
      align-items: center;
      justify-content: center;
      margin-bottom: 8rpx;

      .package-icon {
        font-size: 40rpx;
      }
    }

    .package-amount {
      font-size: 40rpx;
      font-weight: bold;
      color: #fff;
    }

    .package-integral {
      font-size: 24rpx;
      color: rgba(255, 255, 255, 0.6);
    }

    .package-bonus {
      display: flex;
      align-items: center;
      gap: 6rpx;
      padding: 6rpx 16rpx;
      background: rgba(245, 158, 11, 0.2);
      border-radius: 20rpx;
      margin-top: 8rpx;

      .icon {
        font-family: FontAwesome;
        font-size: 20rpx;
        color: #f59e0b;
      }

      text {
        font-size: 20rpx;
        color: #f59e0b;
      }
    }

    .package-select-indicator {
      position: absolute;
      top: 16rpx;
      left: 16rpx;
      width: 40rpx;
      height: 40rpx;
      border-radius: 50%;
      border: 2rpx solid rgba(255, 255, 255, 0.3);
      display: flex;
      align-items: center;
      justify-content: center;
      opacity: 0;
      transition: all 0.3s;

      .icon {
        font-family: FontAwesome;
        font-size: 20rpx;
        color: #fff;
      }
    }

    &.active {
      background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
      border-color: rgba(255, 255, 255, 0.3);
      transform: scale(1.05);
      box-shadow: 0 12rpx 40rpx rgba(102, 126, 234, 0.4);

      .package-select-indicator {
        opacity: 1;
        background: rgba(255, 255, 255, 0.2);
        border-color: #fff;
      }

      .package-integral {
        color: rgba(255, 255, 255, 0.8);
      }
    }

    &.recommended {
      border-color: rgba(245, 158, 11, 0.5);
    }

    &.custom {
      .package-icon-wrapper {
        background: linear-gradient(135deg, #8b5cf6 0%, #6366f1 100%);
      }
    }
  }

  .package-item:active {
    transform: scale(0.98);
  }
}

/* 自定义金额输入 */
.custom-input-card {
  margin-top: 30rpx;
  padding: 30rpx;
  background: rgba(255, 255, 255, 0.08);
  border: 2rpx solid rgba(255, 255, 255, 0.1);
  border-radius: 24rpx;
  backdrop-filter: blur(10rpx);

  .input-label {
    display: flex;
    align-items: center;
    gap: 12rpx;
    margin-bottom: 20rpx;
    font-size: 28rpx;
    font-weight: bold;
    color: #fff;

    .icon {
      font-family: FontAwesome;
      font-size: 24rpx;
      color: #667eea;
    }
  }

  .input-wrapper {
    display: flex;
    align-items: center;
    gap: 16rpx;
    padding: 24rpx 30rpx;
    background: rgba(0, 0, 0, 0.2);
    border: 2rpx solid rgba(255, 255, 255, 0.1);
    border-radius: 16rpx;
    margin-bottom: 16rpx;

    .input-prefix {
      font-size: 32rpx;
      color: #667eea;
      font-weight: bold;
    }

    .amount-input {
      flex: 1;
      font-size: 32rpx;
      color: #fff;
    }
  }

  .input-tips {
    font-size: 24rpx;
    color: rgba(255, 255, 255, 0.5);
    line-height: 1.5;
  }
}

/* 充值按钮 */
.recharge-footer {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 30rpx;
  background: linear-gradient(
    180deg,
    rgba(15, 12, 41, 0.8) 0%,
    rgba(15, 12, 41, 0.95) 100%
  );
  backdrop-filter: blur(20rpx);
  border-top: 1rpx solid rgba(255, 255, 255, 0.05);
  z-index: 10;

  .footer-info {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 20rpx;

    .info-label {
      font-size: 28rpx;
      color: rgba(255, 255, 255, 0.6);
    }

    .info-amount {
      font-size: 40rpx;
      font-weight: bold;
      color: #fff;
    }
  }

  .recharge-btn {
    width: 100%;
    height: 96rpx;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border: none;
    border-radius: 50rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16rpx;
    font-size: 32rpx;
    font-weight: bold;
    color: #fff;
    box-shadow: 0 12rpx 40rpx rgba(102, 126, 234, 0.4);
    transition: all 0.3s;

    .btn-icon {
      font-family: FontAwesome;
      font-size: 32rpx;
    }

    &.disabled {
      opacity: 0.5;
      background: rgba(255, 255, 255, 0.1);
      box-shadow: none;
    }

    &:not(.disabled):active {
      transform: scale(0.98);
    }
  }
}
</style>
